<template>
  <div class="ai all">
    <div class="row all">
      <LImage :src="item.imageUrl" alt="" class="ai-img" />
      <div class="column" style="width:470px">

        <text class="ai-name font32 text2 mr10 mb6">{{item.indicatorName}}</text>

        <div class="row mb6">
          <text class="font24 text3 mr10">{{T('类型')}}</text>
          <text class="font24 text1 ai-desc">{{item.type}}</text>
        </div>
        <div class="row mb6">
          <text class="font24 text3 mr10">{{T('用法说明')}}</text>
          <text class="font24 text1 ai-desc">{{item.instructions}}</text>
        </div>
        <div class="row mb6">
          <text class="font24 text3 mr10">{{T('适用场景')}}</text>
          <text class="font24 text1 ai-desc">{{item.useCase}}</text>
        </div>
        <div class="row acenter mb20">
          <text class="font24 text3 mr10">{{T('信号频率')}}</text>
          <text class="font24 text1 ai-desc">{{item.frequency}}</text>
        </div>

        <div class="row">
          <div class="ai-but main-bt2" @click="addAi">
            <text class="font24 text1">{{T('添加预警')}}</text>
          </div>
        </div>
      </div>
    </div>
    <div class="line1 height1 mt30"></div>
  </div>
</template>


<style src="@/_css/style.css" ></style>
<style scoped>
  .ai {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
  }
  .ai-img {
    width: 210px;
    height: 210px;
    margin-right: 30px;
  }
  .ai-name {
    flex: 1;
    lines: 1;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .ai-tag-trend {
    display: flex;
    max-width: 80px;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(22, 119, 254, 0.2);
    border-radius: 4px;
  }
  .ai-tag-shock {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(235, 151, 59, 0.2);
    border-radius: 4px;
  }
  .ai-but {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    height: 45px;
    border-radius: 4px;
  }

  .ai-desc {
    flex: 1;
    /* max-width: 400px;
      lines: 2; */
    lines: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<script>
  import jconfig from "@/_js/config";
  import jmath from "@/_js/math";
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  export default {
    props: {
      item: {
        type: Object,
        default: undefined,
      },
    },

    data() {
      return {
        Config: jconfig,
        T: T,
      };
    },

    computed: {},

    mounted() {},
    methods: {
      //添加AI
      addAi() {
        this.$emit("addAi", this.item);
      },
    },
  };
</script>